IE浏览器中的ajax缓存问题与new Date()兼容性问题的解决方法

发表于 | 分类于

1、 最近项目做兼容性测试时发现，IE11下采用ajax发送请求更新数据时页面数据始终保持不变，刷新页面也没用，退出后重新登录网站才能获得最新的数据；

网上搜索后才发现原因是：IE浏览器中存在AJAX缓存，当请求地址和参数不变时（‘GET请求’），直接从缓存中获取数据，并不会发送请求，因此数据无法更新；POST请求因为参数发生变化了，因此能正常发送；

解决方法就是：在每一次GET请求中加入随机数或者是当前时间作为参数，这样每次的请求不一样，就能获取到最新的数据；

但另一个问题是，项目中使用GET请求的地方太多，一个个更改效率太低；我们的项目采用的是Vue框架，请求发送是基于Vue-resource,恰好Vue-resource提供了一个拦截器inteceptor,可以用来拦截请求，对响应前后的数据做处理，因此在main.js中添加一个全局的拦截器，对项目中的所有GET请求进行统一处理：

1
2
3
4
5
6
7
8
9
10
Vue.http.interceptors.push((request, next) => {
 // console.log(this)//此处this为请求所在页面的Vue实例
 if(request.method === 'GET'){
   request.url +='?_='+new Date().getTime();
   //console.log(request);
 }
  next((response) => {
    return response;
  });
});

这样每一次的GET请求就是全新的了，IE浏览器下的数据获取与更改都正常了；

2、另一个兼容性问题是：
使用 let st = new Date(‘2017-5-4 00:00:00’).getTime() 获取相应的时间时，IE将返回NaN, chrome和firefox则能正常使用；原因是每个浏览器的new Date()方法允许传入的参数不一致，IE不允许采用‘ - ’的格式传入时间参数；改用‘ / ’的格式则可以兼容；因此对传入的参数做如下处理：

1
2
let t1 = '2017-5-4 00:00:00';
let st = Date.parse(t.replace(/-/g,"/"));